<!DOCTYPE html>
<html lang="en" >
<head  xmlns="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>学生表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">





    <script src="/js/jquery-3.6.1.min.js"></script>


</head>
<body>


<div class="container-fluid">
    学生表

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal" onclick="preAdd()" >
        新增学生
    </button>

    <!-- Modal -->
<!--    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">-->
<!--        <div class="modal-dialog">-->
<!--            <div class="modal-content">-->
<!--                <div class="modal-header">-->
<!--                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>-->
<!--                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
<!--                </div>-->
<!--                <div class="modal-body">-->
<!--                    <form id="formStudent">-->
<!--                        <input hidden="hidden" id="no" name="no"/>-->

<!--                        <div class="form-group">-->
<!--                            <label for="name">姓名</label>-->
<!--                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label for="password">密码</label>-->
<!--                            <input type="password" class="form-control" id="password"  name="password" placeholder="密码">-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label for="sex">性别：</label>-->
<!--                            <select class="form-control" id="sex" name="sex">-->
<!--                                <option value="0">未知</option>-->
<!--                                <option value="1">男</option>-->
<!--                                <option value="2">女</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label for="age">年龄</label>-->
<!--                            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label for="score">成绩</label>-->
<!--                            <input type="text" class="form-control" id="score" name="score" placeholder="成绩">-->
<!--                        </div>-->
<!--                    </form>-->
<!--                    &lt;!&ndash;                表单结束&ndash;&gt;-->
<!--                </div>-->
<!--                <div class="modal-footer">-->
<!--                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
<!--                    <button type="button" class="btn btn-primary">Save changes</button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd()">-->
<!--       新增学生-->
<!--    </button>-->
<!--<div class="col-xs-3">-->
<!--    <label for="exampleInputName2">Name</label>-->
<!--    <input type="text" class="form-control" id="exampleInputName2" placeholder="姓名">-->
<!--</div>-->
<!--<div class="col-xs-3">-->
<!--    <label for="exampleInputEmail2">StudentNumber</label>-->
<!--    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="学号">-->
<!--</div>-->
<!--<button type="submit" id="search_btn" class="btn btn-success">查询</button>-->
<!--<button type="submit" id="rewrite_btn" class="btn btn-warning">重置</button>-->



    <table class="table table-bordered">
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
<!--        <th>密码</th>-->
        <th>性别</th>
        <th>年龄</th>
        <th>成绩</th>
        <th  style="width: 100px" >操作</th>

    </tr>
    </thead>
    <tbody id="studentTb">
    <!--<tr data-th-each="tb_students : ${data}">
        <th scope="row" data-th-text="${tb_students.no}"></th>
        <td data-th-text="${tb_students.name}"></td>
        <td data-th-text="${tb_students.password}"></td>
        <td data-th-text="${tb_students.sex}"></td>
        <td data-th-text="${tb_students.age}"></td>
        <td data-th-text="${tb_students.score}"></td>
    </tr>-->
    </tbody>
</table>
</div>



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">学生信息 </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span>×</button>

            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <input hidden="hidden" id="no" name="no"/>

                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password"  name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别：</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="0">未知</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
<!--                表单结束-->
            </div>
            <div class="modal-footer">
<!--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function preAdd(){
        $("#no").val(0);
    }

    function  saveStudent(){
        var data=$("#formStudent").serialize();
        var id=$("#no").val();
        console.log(id)
        if(id<1){
            //新增
            $.ajax({
                url: '/webapi/student/insert',
                method:'post',

                data:data

            }).done(function (){
                loadTable();

                $("#myModel").modal('hide')
            })
        }else {
            //更新
            $.ajax({
                url: '/webapi/student/update',
                method:'put',

                data:data

            }).done(function (){
                loadTable();

                $("#myModel").modal('hide')
            })
        }



    }


    function  editStudent(no){

        $("#myModal").modal('show');
        console.log(no);

        $.ajax({
            url:'/webapi/student/get/' +no,

        }).done(function (rs){
            $("#no").val(rs.no);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex)
            $("#age").val(rs.age);
            $("#score").val(rs.score);


        })
    }


    function  deleteStudent(no){
        if(confirm("是否确认删除？？")) {
            console.log(no)
            $.ajax({
                url:'/webapi/student/delete/'+no,
                method:'delete'


            }).done(function (){
                loadTable();

            })

        }


    }

    function  loadTable(){
        $.ajax({
            url: '/webapi/student/list/'
        }).done(function (rs) {
            var len = rs.length;

            var html = "";
            for (var  i = 0; i < len; i++) {
                var  item = rs[i];
                html += "<tr>"
                    +"<td>"+item.no+"</td>"
                    +"<td>"+item.name+"</td>"
                    // +"<td>"+item.password+"</td>"
                    +"<td>"+item.sex+"</td>"
                    +"<td>"+item.age+"</td>"
                    +"<td>"+item.score+"</td>"
                    +"<td> <a href='#' onclick='editStudent("+item.no+");'>编辑</a>    <a href='#' onclick='deleteStudent("+item.no+");'>删除</a> </td>"

                    +"</tr>"

            }
            $("#studentTb").html(html);
        })

    }

    $(function () {
        loadTable();
        // $('#myModal').on('shown.bs.modal', function () {
        //     $('#myInput').focus()
        // })


    })

</script>
</body>
</html>